import React, { Component } from 'react';
import { Col, message, Row } from 'antd';
import { history } from 'umi';
import captcha from '@/utils/captcha'; // 引用验证码方法文件
import Cookie from '@/utils/cookie';
import styles from './index.less';
import { connect } from 'dva';
import picUser from './image/user.svg'; // 以下三张图分别放置在用户名、密码和验证码输入框的前方小标志图案
import picPassWord from './image/password.png';

import { Form, Input, Button } from 'antd';
import { Encrypt } from '@/utils/newCrypto';

@connect(({ login }) => ({
  login,
  codeImgInfo: login.codeImgInfo,
  // loading: loading.models.login,
}))
class LoginPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: 'none',
      timer: null,
      msgText: '请输入账号密码',
      errorMessage: '', // 放置位于登录输入框下的红色提示字内容（目前仅针对登录时，用户名密码错误的情况）
      query: '', // 首页跳转带过来的问题
      title: '',
      dialogueId: '',
    };
  }

  componentDidMount() {
    this.getCodeImg();
  }



  handleSubmit = (values) => {
    const { dispatch, codeImgInfo } = this.props;
    let { username, password, verificationCode } = values;
    const { query, title, dialogueId }=this.state;
    username = Encrypt(username);
    password = Encrypt(password);
    dispatch({
      type: 'login/login',
      payload: {
        username,
        password,
        uuid: codeImgInfo.uuid,
        captcha: verificationCode,
      },
      callback: (res) => {
        if (res?.data?.token) {
          if(Cookie.get('token')) Cookie.del('token');
          if(Cookie.get('userName')) Cookie.del('userName');
          Cookie.set('token', res.data.token);
          Cookie.set('userName',values.username);
          message.success('登录成功');
          dispatch({
            type: 'login/getAuthList',
            callback:()=>{
              history.push({
                pathname: '/newTalk',
              });
            }
          })
        } else {
          // this.getCodeImg();
        }
      },
    });
    // this.getVerificationCode('canvas');
  };
  // 随机生成验证码
  getVerificationCode = (id) => {
    const code = captcha(id);
    this.setState({
      code,
    });
  };

  // 获取验证码
  getCodeImg = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'login/getCaptchaImage',
    });
  };

  // renderMessage = content => (
  //   <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />
  // );

  onClickLogout = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'login/logout',
    });
  };

  render() {
    const { show, msgText, errorMessage } = this.state;
    const { codeImgInfo } = this.props;
    const layout = {
      // 利用ant design定义的布局信息，对表单下的内容有一个初始的布局
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
    const tailLayout = {
      wrapperCol: { offset: 8, span: 16 },
    };
    const sw = window.screen.width; // 获取当前所在的分辨率
    const codeWidth = sw > 1900 ? '96' : '80'; // 验证码的宽高在1920分辨率时稍稍更宽和更高
    const codeHeight = sw > 1900 ? '43' : '32';
    const imgWidth = 20 // 用户名、密码及验证码输入框的前置小图片的宽高同样去适应不同分辨率
    const imgMargin = 0;
    return (
      <div className={styles.main}>
        {/*<div className={styles.chineseName}>智能助手</div>*/}
        {/*<div className={styles.englishName}>INTELLIGENT OPERATION PORTAL</div>*/}
        {/*<div className={styles.signBorder} />*/}
        {/*<div className={styles.errorMessage}>{errorMessage}</div>*/}

        <Form
          wrapperCol={{ span: 24 }}
          initialValues={{ remember: true }}
          onFinish={this.handleSubmit}
          // onFinishFailed={onFinishFailed}
        >
          <Col>
            <Row>
              <Form.Item
                // label="用户名"
                name="username"
                rules={[{ required: true, message: '请输入账号!' }]}
              >
                <Input
                  placeholder="请输入账号"
                  style={{width:'100%'}}
                />
              </Form.Item>
              {/* eslint-disable-next-line react/no-string-refs */}
              <div ref="userMsg" className={styles.userMsg} style={{ display: show }}>
                {msgText}！
              </div>
            </Row>
            <Row>
              <Form.Item
                // label="密码"
                name="password"
                rules={[{ required: true, message: '请输入您的密码!' }]}
              >
                <Input.Password
                  placeholder="请输入您的密码"
                />
              </Form.Item>
            </Row>
            <Row style={{display:"flex"}}>
              <Form.Item
                // label="验证码"
                name="verificationCode"
                style={{width:'calc(100% - 150px)'}}
                rules={[{ required: true, message: '请输入您的验证码!' }]}
              >
                <Input
                  placeholder="请输入验证码"
                  style={{width: '100%', display: 'inline-block' }}
                />
              </Form.Item>
              {/*<Form.Item>*/}
              <img
                onClick={this.getCodeImg}
                src={codeImgInfo.captcha}
                style={{ width: '150px', height: '55px', display: 'inline-block'  }}
                alt=""
              />
            </Row>
            <Row>
              <Form.Item>
                <Button type="primary" htmlType="submit" style={{ width:'100%' }}>
                  登录
                </Button>
              </Form.Item>
            </Row>
          </Col>
        </Form>
      </div>
    );
  }
}

export default LoginPage;
